<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>确认订单</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="../css/frameCss/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/store.css" />
	</head>

	<body>
		<header></header>
		<div id="order-container-wrapper">
			<div id="order-container">
				<div class="timeout"></div>
				<div class="playAndDate">
					<div class="playImg">
						<img src="../js/frameJS/iscroll/demos/carousel/leonardo.jpg" />
					</div>
					<ul class="playInfo">
						<li>蒙娜丽莎的微笑</li>
						<li>
							<span>2017年5月30日</span>
							<span>2017年5月31日</span>
							<span>2017年6月1日</span>
							<span>2017年6月2日</span>
							<span>2017年6月3日</span>
						</li>
						<li>
							<p>已选择<span>5</span>场，每场订金<span>¥1000</span>，合计<span>¥5000</span></p>
						</li>
					</ul>
				</div>
				<div class="clear-1"></div>
				<div class="address nav_guide">
					<ul>
						<li>
							<dl>
								<dt>联系人：<span style="padding-left: 45px;">网演（13360037291）</span></dt>
								<dd>演出地址：<span>广东省广州市越秀区海山街1号</span></dd>
							</dl>
						</li>
					</ul>
				</div>
				<div class="payWay">
					<p>请选择支付方式</p>
					<div class="wechatPay mui-radio">
						<input type="radio" name="optionsRadios" id="optionsRadios1" value="wechatPay" checked>
						<img src="../images/wechatPay.jpg" />
						<label for="optionsRadios1">微信</label>
					</div>
					<div class="aliPay mui-radio">
						<input type="radio" name="optionsRadios" id="optionsRadios2" value="aliPay">
						<img src="../images/AliPay.jpg" />
						<label for="optionsRadios2">支付宝</label>
					</div>
				</div>
				<div class="mui-input-group">
					<div class="mui-input-row mui-checkbox mui-left" style="height: 50px;">
						<span style="line-height: 50px;margin-left: 15%;">我已仔细阅读<button class="mui-btn mui-btn-blue mui-btn-outlined" style="float: none;width: 25%;margin: 9px 0 0 5px;padding: 8px 15px;" data-toggle="modal" data-target="#myModal">相关条例</button></span>
						<input name="checkbox" value="Item 1" type="checkbox" style="top: 7px;left: 0;margin-left: 5%;" checked>
					</div>
				</div>
			</div>
		</div>
		<div id="confirmPay">
			<p>需支付：<span style="color: #FF0000;"><span style="font-size: 24px;">5000</span>元</span>
			</p>
			<div><button class="confirmBtn btn btn-danger btn-lg">确认支付</button></div>
		</div>
		
		<!-- 相关条例弹出框 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document" style="margin-top: 40%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">Modal title</h4>
					</div>
					<div class="modal-body">
						...
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">阅读完毕</button>
					</div>
				</div>
			</div>
		</div>

		<script src="../js/frameJS/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/frameJS/iscroll/build/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/frameJS/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script type="text/javascript">
			$(function() {
				//加载公共头部！！！
				$('header').load('../commonTemplate/common-header.html')

				//引用iScroll并调用
				function loaded() {
					var myScroll = new IScroll('#order-container-wrapper', {
						scrollbars: false,
						mouseWheel: true,
						interactiveScrollbars: true,
						shrinkScrollbars: 'scale',
						fadeScrollbars: true
					});
				}
				window.setTimeout(loaded, 100);
				
				//支付剩余时间倒数
				function reciprocal() {
					var m = 29;
					var s = 59;
					setInterval(function() {
						if(s < 10) {
							$('#order-container-wrapper .time').html(m + ':0' + s);
						} else {
							$('#order-container-wrapper .time').html(m + ':' + s);
						}
						s--;
						if(s < 0) {
							s = 59;
							m--;
						}
					}, 1000)

					$('#order-container-wrapper .timeout').html('支付剩余时间：<span class="time"></span>')
				}
				reciprocal();
				
				//点击地址跳转到地址页
				function toAddress(){
					$('.address li').click(function(){
						window.location.href = '../user/address.html'
					})
				}
				toAddress();
			})
		</script>
	</body>

</html>